<template>
  <com-header
    title="订单详情"
    right="操作记录"
    @clickRight="record"
  ></com-header>
  <div class="padded-10">
    <van-row align="center">
      <van-col :span="8">
        <van-image width="110" height="110" :src="order.image" />
      </van-col>
      <van-col :span="16">
        <van-row align="center">
          <van-image width="18" height="18" :src="icons[order.type - 1]" />
          <span class="van-ellipsis text-7 ftn16 p-l-5">{{ order.name }}</span>
        </van-row>
        <div class="text-7 ftn14">
          <span class="p-r-10">下单金额:</span>
          <span>￥{{ order.price }}</span>
        </div>
        <div class="text-7 ftn14">
          <span class="p-r-10">返还金额:</span>
          <span>￥{{ order.back_price }}</span>
        </div>
        <van-row align="center" class="text-7 ftn14">
          <span class="p-r-10">试用ID:</span>
          <span v-text="order.id"></span>
          <van-button
            type="primary"
            size="mini"
            class="copy"
            :data-clipboard-text="order.id"
            @click="copy('.copy')"
            >复制</van-button
          >
        </van-row>
        <van-tag
          plain
          color="#999"
          v-text="order.statusname"
          size="large"
        ></van-tag>
      </van-col>
    </van-row>
    <van-row type="flex" align="center" v-if="order.exittime" class="p-t-5">
      <van-count-down :time="order.exittime * 1000" @finish="init">
        <template #default="timeData">
          <span class="text-green">{{ timeData.days }}</span>
          <span class="text-green">天</span>
          <span class="text-green">{{ timeData.hours }}</span>
          <span class="text-green">时</span>
          <span class="text-green">{{ timeData.minutes }}</span>
          <span class="text-green">分</span>
          <span class="text-green">{{ timeData.seconds }}</span>
          <span class="text-green">秒</span>
        </template>
      </van-count-down>
      <span class="text-green">后失效</span>
    </van-row>
    <div class="p-t-5 text-green" v-if="order.status == 8">
      您长时间没有参加该试用,已过期！
    </div>
  </div>
  <div v-if="order.status != 8">
    <div class="hr"></div>
    <div class="padded-10">
      平台：<span class="text-green">{{ order.downtype_name }}</span
      >,下单帐号:<span class="text-green">{{ order.buynum }}</span>
    </div>
    <van-row
      align="center"
      class="padded-10 van-hairline--top"
      v-if="order.status != 1"
    >
      <span>商家QQ：{{ order.qq }}</span>
      <van-button
        type="primary"
        size="mini"
        class="qq"
        :data-clipboard-text="order.qq"
        @click="copy('.qq')"
        >复制</van-button
      >
    </van-row>
    <div class="hr"></div>
    <div
      v-if="order.status == 1"
      class="text-center text-7 ftn18"
      style="padding: 30px"
    >
      审核通过后可查看下单步骤
    </div>
    <!-- 审核通过，通过的订单,驳回订单,待试客预览，待商家审图 -->
    <div v-if="[2, 3, 4, 5, 10, 11, 12].includes(order.status)">
      <div class="text-center text-3 ftn16 p-b-10 p-t-10">注意事项</div>
      <div
        class="van-hairline--bottom"
        v-if="order.is_foot == 1 && ![11,12].includes(order.status)"
      >
        <div class="p-l-10">
          <span class="text-7">货比三家:</span>
          <span class="text-green">需要，浏览其他店铺同类宝贝</span>
        </div>

        <van-row class="padded-10">
          <van-col :span="8">
            <div class="text-7 ftn12">点击上传足迹截图</div>
            <van-uploader :after-read="afterRead" @click="imageType='foot_image'">
              <van-image
                      width="100"
                      height="120"
                      :src="upload.foot_image.content"
                      v-if="upload.foot_image.content"
                      />
              <div class="text-center text-7 ftn12 upload" v-else>足迹截图</div>
            </van-uploader>
          </van-col>
          <van-col :span="8">
            <div class="text-7 ftn12">【案例图】</div>
            <van-image
              width="100"
              height="120"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </van-col>
        </van-row>
      </div>

      <van-row
        class="padded-10 van-hairline--bottom"
        v-if="order.is_sou == 1 && ![11,12].includes(order.status)"
      >
        <van-col :span="8">
          <div class="text-7 ftn12">上传搜索关键词截图</div>
          <van-uploader :after-read="afterRead" @click="imageType='sou_image'">
            <van-image
              width="100"
              height="120"
              :src="upload.sou_image.content"
              v-if="upload.sou_image.content"
              />
            <div class="text-center text-7 ftn12 upload" v-else>搜索关键词截图</div>
          </van-uploader>
        </van-col>
        <van-col :span="8">
          <div class="text-7 ftn12">【案例图】</div>
          <van-image
            width="100"
            height="120"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
        </van-col>
      </van-row>
      <!-- 拼多多,淘宝，天猫付款截图 -->
      <div
        class="van-hairline--bottom p-t-10"
        v-if="
          order.is_fu == 1 &&
          ![11,12].includes(order.status) &&
          [1, 2, 4].includes(order.downtype)
        "
      >
        <div class="p-l-10">
          <span class="text-7">付款截图:</span>
          <span class="text-green">需要，请上传宝贝的付款截图</span>
        </div>

        <van-row class="padded-10">
          <van-col :span="8">
            <div class="text-7 ftn12">点击上传付款截图</div>
            <van-uploader :after-read="afterRead"  @click="imageType='pdd_image'">
              <!-- <van-image
                      width="100"
                      height="100"
                      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                      /> -->
              <div class="text-center text-7 ftn12 upload">付款截图</div>
            </van-uploader>
          </van-col>
          <van-col :span="8">
            <div class="text-7 ftn12">【案例图】</div>
            <van-image
              width="100"
              height="120"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </van-col>
        </van-row>
      </div>
      <van-row gutter="10" align="center" class="padded-10">
        <van-col v-if="order.is_collect">
          <span>收藏宝贝</span>
          <van-icon name="success" color="#1baeae" size="16" />
        </van-col>
        <van-col v-if="order.is_fu">
          <span>浏览副宝贝</span>
          <van-icon name="success" color="#1baeae" size="16" />
        </van-col>
        <van-col v-if="order.is_chat">
          <span>聊天</span>
          <van-icon name="success" color="#1baeae" size="16" />
        </van-col>
        <van-col v-if="order.is_cart">
          <span>加入购物车</span>
          <van-icon name="success" color="#1baeae" size="16" />
        </van-col>
        <van-col v-if="order.is_ping">
          <span>评价</span>
          <van-icon name="success" color="#1baeae" size="16" />
        </van-col>

        <van-col v-if="order.is_cart">
          <span>浏览评价</span>
          <van-icon name="success" color="#1baeae" size="16" />
        </van-col>
        <van-col v-if="order.is_wen">
          <span>发布大家问</span>
          <van-icon name="success" color="#1baeae" size="16" />
        </van-col>
      </van-row>
      <!-- 收藏加购截图 -->
      <div
        class="van-hairline--bottom p-t-10"
        v-if="
          order.is_cart == 2 ||
          order.is_collect == 2 ||
          [11,12].includes(order.status)
        "
      >
        <van-row class="padded-10">
          <van-col :span="8" v-if="order.is_collect == 2">
            <div class="text-7 ftn12">点击上传收藏截图</div>
            <van-uploader :after-read="afterRead" @click="imageType='collect_image'">
              <!-- <van-image
                      width="100"
                      height="100"
                      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                      /> -->
              <div class="text-center text-7 ftn12 upload">收藏截图</div>
            </van-uploader>
          </van-col>
          <van-col :span="8" v-if="order.is_cart == 2">
            <div class="text-7 ftn12">点击上传加购截图</div>
            <van-uploader :after-read="afterRead" @click="imageType='cart_image'">
              <!-- <van-image
                      width="100"
                      height="100"
                      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                      /> -->
              <div class="text-center text-7 ftn12 upload">加购截图</div>
            </van-uploader>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="hr"></div>
    <div class="padded-10">
      <div class="text-center p-b-10 ftn16">下单步骤</div>
      <div class="p-b-10 p-t-10 ftn14 van-hairline--bottom">
        <span class="text-7 p-r-5">1、</span>
        <span class="text-green">打开{{ order.downtype_name }}</span>
      </div>
      <van-row class="p-b-10 p-t-10 ftn14">
        <span class="text-7 p-r-5">2、</span>
        <van-col :span="22">
          <span>搜索关键词:</span
          ><span class="text-green" v-text="order.keyword.key"></span>
          <span class="p-l-10 p-r-10 ftn12">(请手动输入关键词,不可复制)</span>
          <van-button type="primary" size="mini" @click="changeKeyWord"
            >换个关键词</van-button
          >
          <div class="text-green ftn12">
            注：禁止淘宝客返利网下单，一旦发现直接扣除佣金奖励
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 提交评价,收藏加购截图 -->
    <van-popup v-model:show="comment.show" round :style="{ width: '70%' }">
      <div class="comment padded-10">
        <van-row>
          <van-col :span="12" class="text-center">
            <div class="text-7 p-b-5 ftn12">点击下面上传包裹拍摄图</div>
            <van-uploader :after-read="afterRead" @click="imageType='bag_image'">
            <van-image
              width="100"
              height="120"
              :src="upload.bag_image.content"
              v-if="upload.bag_image.content"
              />
            <div class="text-center text-7 ftn12 upload" v-else>包裹签收拍图</div>
          </van-uploader>
          </van-col>
          <van-col :span="12"  class="text-center">
            <div class="text-center text-7 p-b-5 ftn12">点击下面上传评价截图</div>
            <van-uploader :after-read="afterRead" @click="imageType='comment_image'">
            <van-image
              width="100"
              height="120"
              :src="upload.comment_image.content"
              v-if="upload.comment_image.content"
              />
            <div class="text-center text-7 ftn12 upload" v-else>评价截图</div>
          </van-uploader>
          </van-col>
        </van-row>
        <div class="ftn12 text-7 p-t-10">{{order.confirmtime}}后可确认提交，已在购买平台确认了收货并提交了评价后才可进行该操作，否则封号处理！</div>
      </div>
      <van-row align="center" justify="space-between">
        <van-col :span="12">
          <van-button type="primary" size="large" @click="updateComment">确定</van-button>
        </van-col>
        <van-col :span="12">
          <van-button type="default" size="large" @click="comment.show = false">取消</van-button>
        </van-col>
      </van-row>
    </van-popup>
    <div :style="{ height: `${tabH}px` }"></div>
    <van-action-bar :ref="tabbar">
      <van-action-bar-button
        type="danger"
        text="取消申请"
        color="#1baeae"
        @click="onClickButton"
        v-if="order.status == 1"
      />
      <van-action-bar-button
        type="danger"
        text="放弃资格"
        color="#333"
        @click="onClickButton"
        v-if="order.status == 2"
      />
      <van-action-bar-button
        type="danger"
        color="#1baeae"
        text="填写订单号"
        v-if="order.status == 2"
        @click="updateOrder('ordernum')"
      />

      <van-action-bar-button
        type="danger"
        color="#1baeae"
        text="第二步：确认已收到货并提交了评价"
        v-if="order.status == 4"
        @click="comment.show = true"
      />
    </van-action-bar>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { copy, icons, fnDialog, fnMsg } from "@/plugins/common";
import { orderDetail, orderUpdate, keyWord, uploadFile } from "@/service/good";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const route = useRoute(),
      router = useRouter(),
      order = ref({
        goods_id: 0,
        id: "",
        image: "",
        name: "",
        type: 0,
        price: "",
        back_price: "",
        statusname: "",
        exittime: 0,
        downtype_name: "",
        buynum: "",
        status: 0,
        qq: "",
        downtype: 0,
        is_collect: 0,
        is_fu: 0,
        is_chat: 0,
        is_cart: 0,
        is_ping: 0,
        is_liu: 0,
        is_wen: 0,
        is_foot: 0,
        is_sou: 0,
        keyword: { key: "", page: "", rate: "", sort: "" },
        collect_image: "",
        cart_image: "",
        comment_image: '',
        bag_image: '',
        confirmtime: '',
      }),
      upload = ref({
        foot_image: {file: '', content: ''},
        pdd_image: {file: '', content: ''},
        collect_image: {file: '', content: ''},
        cart_image: {file: '', content: ''},
        sou_image: {file: '', content: ''},
        bag_image: {file: '', content: ''},
        comment_image: {file: '', content: ''},
      });
    const record = () => {},
      imageType = ref(''),
      tabH = ref<Number>(0),
      tabbar = (el: any) => {
        tabH.value = el?.$el.clientHeight;
      },comment = ref({
        show: false
      })
    const init = () => {
      orderDetail({ order_id: route.params.id }).then((res) => {
        console.log(res);
        if (res && res.status) order.value = res.data;
      });
    };
    const onClickButton = () => {
      if (order.value.status == 1) {
        fnDialog("提示", "确定取消该订单吗?")
          .then(() => {
            orderUpdate({ type: "cancel", order_id: order.value.id }).then(
              (res) => {
                if (res) {
                  fnMsg(res.msg);
                  setTimeout(() => {
                    res.status && router.back();
                  }, 1000);
                }
              }
            );
          })
          .catch(() => {
            fnMsg("取消操作");
          });
      }
    };
    // 判断是否上传收藏加购截图
    const fnToggleUploadCollectCart = () => {
      let { is_cart, is_collect, collect_image, cart_image, status } =
        order.value;
      if (is_collect == 2 && !upload.value.collect_image.file && !collect_image) {
        fnMsg("请上传收藏截图");
        return false;
      } else if (is_cart == 2 && !upload.value.cart_image.file && !cart_image) {
        fnMsg("请上传加购截图");
        return false;
      } else {
        return true;
      }
    };
    const updateOrder = (type: string) => {
      switch (type) {
        case "ordernum":
          let { foot_image, pdd_image, sou_image } = upload.value;
          let { is_foot, is_sou, is_fu, downtype } = order.value;
          if (is_foot && !foot_image.file) {
            fnMsg("请上传足迹截图");
            return false;
          } else if (
            is_fu &&
            [1, 2, 4].includes(downtype) &&
            !pdd_image.file
          ) {
            fnMsg("请上传付款截图");
            return false;
          } else if (is_sou && !sou_image.file) {
            fnMsg("请上传搜索关键词截图");
            return false;
          } else {
            if (fnToggleUploadCollectCart()) {
            }
          }
          break;
      }
    };

    const afterRead = (file: any) => {
      upload.value[imageType.value] = file;
    };

    const changeKeyWord = () => {
      let { goods_id, keyword } = order.value;
      keyWord({
        goods_id: goods_id,
        keyword: keyword.key,
        order_id: order.value.id,
      }).then((res) => {
        if (res && res.status) {
          order.value.keyword = res.data;
        }
      });
    };

    const updateComment = () => {
      let {comment_image, bag_image} = upload.value;
      if (!comment_image.content) {
        fnMsg("请上传评价截图");
        return false;
      } else if (!bag_image.content) {
        fnMsg("请上传包裹拍摄图");
        return false;
      } else {
       

        // api
        let param = new FormData(); // 创建form对象
        let _param: any = {
          order_id: order.value.id,
          type: "confirm",
          bao_image: bag_image.file,
          comment_image: comment_image.file,
        };
        for (var i in _param) {
          param.append(i, _param[i]); // 添加form表单中其他数据
        }
        uploadFile('Goods/orderUpdate', param).then(res => {
          console.log(res)
          if (res) {
            fnMsg(res.msg);
            if (res.status) {
              comment.value.show = false;
              init();
            }
          }

        })
      }
    }
    onMounted(() => {
      init();
    });
    return {
      record,
      copy,
      order,
      icons,
      tabbar,
      tabH,
      imageType,
      upload,
      comment,
      init,
      onClickButton,
      updateOrder,
      afterRead,
      changeKeyWord,
      updateComment
    };
  },
});
</script>

<style lang="less">
.upload {
  background-color: #f5f5f5;
  width: 100px;
  height: 120px;
  line-height: 120px;
}
</style>
